<template>
  <div v-show="isshow" class="food" ref="fooddetail">
  <div class="food-detail">
    <div class="header">
       <div class="img">
         <img class="image" :src="food.icon" alt="">
         <van-icon class="show" @click="show" name="arrow-left" />
       </div>
       <div class="content">
              <div class="left">
                  <div class="name">{{food.name}}</div>
                  <div class="sellerrat">月售{{food.sellCount}}份 好评率{{food.rating}}%</div>
                  <div class="price">
                      <span class="new">￥{{food.price}}</span>
                      <span class="old">{{food.oldPrice}}</span>
                  </div>
              </div>
              <div class="right">
                 <add-cart :food="food"></add-cart>
                 <div @click="addfirst" v-show="!food.count || food.count===0" class="overlap">
                   <span class="join">加入购物车</span></div>
              </div>
          </div>
    </div>
     <line-throw v-show="food.info"></line-throw>
     <div v-show="food.info" class="info">
        <h1 class="title">商品介绍</h1>
        <p class="product">{{food.info}}</p>
        <p class="product">{{food.info}}</p>
      </div>
      <line-throw></line-throw>
      <div class="reating">
        <h1 class="title">商品评价</h1>
      </div>
  </div>
  </div>
</template>

<script>
import Vue from 'vue'
import BScroll from 'better-scroll'
import LineThrow from '../linetrown/LineThrow'
import AddCart from '../cart/AddCart'
export default {
  name: 'food',
  data () {
    return {
      isshow: false
    }
  },
  props: {
    food: {
      type: Object
    }
  },
  methods: {
    show () {
      this.isshow = !this.isshow
    },
    addfirst () {
      if (!this.food.count) {
        Vue.set(this.food, 'count', 1)
      } else {
        this.food.count++
      }
    },
    initscroll () {
      if (!this.scroll) {
        this.scroll = new BScroll(this.$refs.fooddetail, {
          click: true
        })
      } else {
        this.scroll.refresh()
      }
    }
  },
  mounted () {
    this.initscroll()
  },
  components: {
    LineThrow,
    AddCart
  }
}
</script>

<style lang="scss" scoped>
   .food{
     position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 50px;
        background: #fff;
        overflow: hidden;
        z-index: 10;
        .food-detail{
          .header{
            .img{
              position: relative;
              width: 100%;
              height: 0;
              padding-bottom: 100%;
              .image{
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
              }
              .show{
              position: absolute;
              top: 10px;
              left: 10px;
              background-color: rgba(46, 164, 211, 0.5);
              padding: 4px 8px;
              border-radius: 40%;
            }
            }
            .content{
                display: flex;
                justify-content: space-between;
                padding: 18px;
                position: relative;
                .left{
                    .name{
                        font-size: 16px;
                        line-height: 16px;
                        color: rgb(7, 17, 27);
                        font-weight: 700;
                    }
                    .sellerrat{
                        font-size: 12px;
                        line-height: 12px;
                        color: rgba(94, 92, 92, 0.836);
                        margin-top: 8px;
                    }
                    .price{
                        font-size: 16px;
                        line-height: 24px;
                        color: red;
                        margin-top: 18px;
                        .new{
                          font-weight: 700;
                        }
                        .old{
                            text-decoration: line-through;
                            font-size: 14px;
                        }
                    }
                }
                .right{
                    position: absolute;
                    right: 36px;
                    bottom: 36px;
                    .overlap{
                        position: absolute;
                        bottom: -14px;
                        right: -18px;
                        width: 76px;
                        height: 26px;
                        background-color: rgb(0, 160, 220);
                        border-radius: 14px;
                        padding: 6px 12px;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-around;
                        align-items: center;
                        .join{
                            font-size: 12px;
                            color: white;
                        }
                    }
                }
            }
          }
          .info{
          padding: 18px;
          .title{
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 8px;
          }
          .product{
            font-size: 14px;
            line-height: 28px;
            color: rgb(77,85,93);
            padding: 0 8px;
          }
        }
        .reating{
          // padding: 18px;
          .title{
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 8px;
          }
        }
        }
   }
</style>
